<template>
<div class="zss_sycon" :style="{margin: '20px 20px 0', background: '#fff'}">
  <div v-for="(item,index) in items" :key="index" style="margin-bottom:20px">
    <p style="font-size:18px;padding:10px">{{item.title}}</p>
      <Row :gutter="15" >
          <Col span="4" v-for="(list,i) in item.lists" :key="i" >
            <div class="projectCard" @click='openProject'>
              <Col span="19">
                 <p  class="zss_title">{{list.name}}</p>
              </Col>
              <Col span="5">
                <p class="zss_icontab">
                  <span class="top">
                    <Tooltip content="项目设置" placement="top">
                        <Icon type="edit" :style="{paddingRight:'5px'}"></Icon>
                    </Tooltip>
                  </span>
                  <span class="top">
                    <Tooltip content="星标" placement="top">
                        <Icon type="ios-star-outline"></Icon>
                    </Tooltip>
                  </span>
                </p>
              </Col>
            </div>
          </Col>
      </Row>
  </div>


</div>
</template>
<script>
  import draggable from 'vuedraggable'
  export default {
    name: 'test',
    g:true,
    data () {
      return {
        items:{
          yongyou:{
            title:'我拥有的项目',
            lists: [
              {
                name: '山东潍坊商业学校山东潍坊商业学校'
              },
              {
                name: '山东协和学院'
              },
              {
                name: '青岛旅游学院'
              }
            ]
          },
          canyu:{
            title:'我参与的项目',
            lists:[
              {
                name: '山东协和学院'
              },
              {
                name: '山东潍坊商业学校'
              }
            ]
          },
          huishou:{
            title:'回收站',
            lists:[
              {
                name: '山东协和学院'
              },
              {
                name: '山东潍坊商业学校'
              }
            ]
          }
        }
      }
    },components: {
      draggable
    },
    methods: {
      openProject () {
        this.$router.push({
          path: '/manager/project'
        })
      },
      getdata (evt) {
        console.log(evt.draggedContext.element.id)
      },
      datadragEnd (evt) {
        console.log('拖动前的索引 :' + evt.oldIndex)
        console.log('拖动后的索引 :' + evt.newIndex)
        console.log(this.tags)
      }
    }
  }
</script>
<style >
  .zss_title{
    float: left;
    color: white;
    font-size: 16px
  }
  .zss_sycon .ivu-card-head p,.zss_sycon .ivu-card-head-inner{
    color:white;
    font-weight: normal;
    font-size: 16px
  }
  .projectCard > a{color: white}
  .projectCard{
    background: url(/static/images/xbj.jpg) no-repeat 0 -150px;
    background-size: cover;
    border:0;
    width: 100%;
    height: 150px;
    padding:20px;
    border-radius: 5px;
    transition: all 0.3s;
  }
  .projectCard:hover{
    box-shadow: 0 10px 20px rgba(152, 152, 152, 0.5);
    transform: translateY(-5px);
    cursor: pointer;
  }
  .zss_icontab{
    float: right;
    color: white
  }
  .ivu-card-head{
    border: 0
  }
  .top{
    display: inline;
  }
</style>
